<!--
  功能：文章列表页面
  说明：展示竞赛相关文章列表，点击进入文章详情
-->
<template>
	<view class="content bg-f8">
		<view class="header bg-ff border-b-ee" :style="'padding-top:'+$statusBarHeight+'px;'">
			<view class="header-box dis-flex-vc dis-flex-hsb">
				<view class="header-back dis-flex-vc" @click="goBack">
					<i class="gjjd-iconfont icon-xiangzuo font-s20 color-33"></i>
				</view>
				<view class="header-title font-s18 font-wb color-33 text-C">阅读文章</view>
				<view class="header-placeholder w-60"></view>
			</view>
		</view>
		
	<view class="body" :style="'margin-top:'+(50+$statusBarHeight)+'px;'">
		<view 
			v-for="(item, index) in articleList" 
			:key="index"
			class="article-item bg-ff radius-16 shadow-sm pad-30 mar-B20 transition-fast"
			@click="goToDetail(item)"
		>
			<view class="article-content dis-flex-vc dis-flex-hsb">
				<text class="article-title font-s16 color-33">{{item.title}}</text>
				<i class="gjjd-iconfont icon-xiangyou font-s14 color-99"></i>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import { getCoursewareList } from "@/api/competition";

export default {
	data() {
		return {
			matchId: null, // 竞赛ID（从URL参数或本地存储动态获取）
			articleList: []
		}
	},
	onLoad(options) {
		// 优先从URL参数获取matchId
		if (options.matchId) {
			this.matchId = parseInt(options.matchId);
		} else {
			// 其次从本地存储获取（entrance.vue进入时会存储）
			this.matchId = uni.getStorageSync('currentMatchId') || null;
		}
		
		console.log('【阅读文章】文章列表页 matchId:', this.matchId);
		
		this.loadArticleList();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		/**
		 * 加载文章列表
		 */
		async loadArticleList() {
			try {
				uni.showLoading({ title: '加载中...' });
				
				// 按分类ID=350筛选文章
				const res = await getCoursewareList({
					categoryId: 350
				});
				
				uni.hideLoading();
				
				if (res.code === 1 && res.data) {
					this.articleList = res.data.list || [];
					
					if (this.articleList.length === 0) {
						uni.showToast({ title: '暂无文章', icon: 'none' });
					}
				} else {
					uni.showToast({ title: res.msg || '加载失败', icon: 'none' });
				}
			} catch (error) {
				console.error('【阅读文章】加载文章列表失败：', error);
				uni.hideLoading();
				uni.showToast({ title: '加载失败，请重试', icon: 'none' });
			}
		},
		
		goToDetail(item) {
			uni.navigateTo({
				url: `/pages/competition/learning/article-detail?id=${item.id}&title=${encodeURIComponent(item.title)}&matchId=${this.matchId || ''}`
			});
		}
	}
}
</script>

<style scoped>
.content {
	min-height: 100vh;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.header-box {
	height: 50px;
	padding: 0 30rpx;
}

.header-back {
	width: 60rpx;
	height: 60rpx;
}

.header-title {
	flex: 1;
}

.body {
	padding: 20rpx;
	padding-top: 40rpx;
}

.article-item:active {
	transform: scale(0.98);
	opacity: 0.9;
}

.article-title {
	flex: 1;
	line-height: 1.5;
}
</style>